<template>
	<!--动态组件-->
	<view class="com-content" :style="{'border-bottom':obj.message.length>0?'20rpx solid #F5F5F5':'none'}">
		<view class="com-top" v-if="dynType==='syetem'">
			<image class="com-top-img" :src="obj.avatar || $mAssetsPath.icon_mrtx"></image>
			<view class="com-top-r">
				<view class="com-top-r-n">{{obj.nickname}}</view>
				<view class="com-top-r-t">{{obj.create_time}}</view>
			</view>
		</view>
		<view class="com-top2" v-else-if="dynType==='user'">
			<view class="com-top-time">{{obj.create_time}}</view>
			<image class="com-top-icon" @click="deleted(obj.id)" :src="$mAssetsPath.icon_shanchu"></image>
		</view>
		<view class="com-box" @click.stop="todetail(obj.id)">
			<!--文本-->
			<view class="com-box-txt">
				<image class="com-box-txt-stick" v-if="obj.order===1" :src="stick"></image>{{obj.content}}
			</view>
			<!--图片-->
			<view class="com-box-imgs">
				<block v-for="(item,index) in obj.img" :key="index">
					<image class="com-box-img" :src="item" :style="{
						width:img_width + 'px',height:img_width +'px'
					}" @click="previewImage(index,obj.img)"></image>
				</block>
			</view>
			<!--置顶、删除、去评论-->
			<view class="com-box-icons" v-if="dynType==='syetem'">
				<view class="com-box-icon">
					<view class="com-box-i" v-if="dynamicStatu" @click="checked(obj.id,obj.order)"><image class="icon-tb" :src="obj.order===1?icon_qx:icon_zd"></image>{{obj.order===1?'取消':'置顶'}}</view>
					<view class="com-box-i" @click="deleted(obj.id)"><image class="icon-tb" :src="icon_sc"></image>删除</view>
					<view class="com-box-i" @click="comment(obj.id)"><image class="icon-tb" :src="icon_pl"></image>评论</view>
				</view>
			</view>
			<!--评论列表-->
			<view class="com-box-msg" :style="{height:obj.message.length>0?'':'0rpx','padding-bottom':obj.message.length>0?'20rpx':'none'}">
				<view class="com-box-msg-box" v-if="scro">
					<block v-for="(ite,index) in obj.message.slice(0,3)" :key="index">
						<view class="com-box-msg-n" v-if="ite.tonickname === ''" @click="forcomment(obj.id, ite.id)">
							{{ite.nickname}}:<view class="com-box-msg-m">{{ite.content}}</view>
						</view>
						<view class="com-box-msg-n" v-if="ite.tonickname !== ''" @click="forcomment(obj.id, ite.id)">
							{{obj.nickname}}<text class="com-box-msg-m">回复</text>
							{{ite.nickname}}<text>:</text><text class="com-box-msg-m">{{ite.content}}</text>
						</view>
					</block>
				</view>
				<view  class="com-box-msg"  v-else>
					<view  class="com-box-msg-box" v-for="(ite,index) in obj.message" :key="index">
						<view class="com-box-msg-n" v-if="ite.tonickname === ''" @click="forcomment(obj.id, ite.id)">
							{{ite.nickname}}:<view class="com-box-msg-m">{{ite.content}}</view>
						</view>
						<view class="com-box-msg-n" v-if="ite.tonickname !== ''" @click="forcomment(obj.id, ite.id)">
							{{obj.nickname}}<text class="com-box-msg-m">回复</text>
							{{ite.nickname}}<text>:</text><text class="com-box-msg-m">{{ite.content}}</text>
						</view>
					</view>
				</view>
				<view class="more-btn" v-if="obj.message.length>2" @click="morepl" v-show="scro">展开</view>
				<view class="more-btn" v-if="obj.message.length>2" @click="morepl" v-show="!scro">收起</view>
			</view>
			<slot name="pl-box"></slot>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'sel-logo',
		props: {
			dynamicStatu:{
				type:Boolean,
				default:false
			},
			obj: {
				type: Object,
				default () {
					return {
						id:0,
						head: '/static/data-img/data-tx.png',
						name: '流星',
						time: '1小时前',
						txt:'    今天采购了10本画册，哇这画册做的也太好看，这个设计师做的不错，我很喜欢他的风格。有喜欢的小伙伴也可以去看看！',
						stick_statu:1,
						imgs:[],
					}
				}
			},
			//组件类型 system-系统首页动态 user-个人动态
			dynType:{
				type:String,
				default:'syetem'
			},
			stick:{
				type:String,
				default:'/static/icon/icon-stick.png'
			},
			icon_qx:{
				type:String,
				default:'/static/icon/icon-quxiao.png'
			},
			icon_zd:{
				type:String,
				default:'/static/icon/icon-zhiding.png'
			},
			icon_sc:{
				type:String,
				default:'/static/icon/icon-shanchu2.png'
			},
			icon_pl:{
				type:String,
				default:'/static/icon/icon-pinglun.png'
			}
		},
		computed:{
			img_width() {
			  return (this.system.w - 42)/3;
			}
		},
		data() {
			return {
				system:{
					w:0,
					h:0,
					scale:1,
					systemScale:1,
				},
				scro: true,
			}
		},
		created() {
			this.getSystem()
		},
		methods: {
			/**
			 * @description: 获取设备信息
			 * @param {type} 
			 * @return {type} 
			 * @author: hch
			 */
			getSystem() {
				uni.getSystemInfo().then(res =>{
					let system = res[1]
					this.system.scale = 667 / 375 //按照苹果留 375*667比例 其他型号手机等比例缩放 显示
					this.system.systemScale = system .windowWidth / 375 //按照苹果留 375*667比例 其他型号手机等比例缩放 显示
					this.system.w = system.windowWidth;
					this.system.h = system.windowHeight;
				})
				
			},
			todetail(){
				this.$emit('todetail')
			},
			checked(id,e){
				this.$emit('checked',id,e)
			},
			deleted(e){
				this.$emit('deleted',e)
			},
			comment(e){
				this.$emit('comment',e)
			},
			forcomment(id,e){
				this.$emit('forcomment',id,e)
			},
			// 放大图片
			previewImage(index,image) {
				var imgArr = image;
				//预览图片
				uni.previewImage({
					urls: imgArr,
					current: imgArr[index]
				});
			},
			morepl() {
				console.log(1111111)
				this.scro = !this.scro
			}
		}
	}
</script>

<style lang="scss">

	.com-content{
		display: flex;
		flex-direction: column;
		padding: 0 30rpx;
		.com-top2{
			display: flex;
			justify-content: space-between;
			margin-bottom: 12rpx;
			.com-top-time{
				font-size: 40rpx;
				font-weight: bold;
				color: $font-color-3;
			}
			.com-top-icon{
				width: 34rpx;
				height: 34rpx;
			}
		}
		.com-top{
			display: flex;
			padding-top: 30rpx;
			margin-bottom: 24rpx;
			
			.com-top-img{
				width: 72rpx;
				height: 72rpx;
				border-radius: 50%;
				margin-right: 20rpx;
			}
			.com-top-r{
				display: flex;
				flex-direction: column;
				.com-top-r-n{
					font-size: 32rpx;
					font-weight: 400;
					line-height: 42rpx;
					color: $font-color-3;
				}
				.com-top-r-t{
					font-size: 24rpx;
					font-weight: 400;
					line-height: 30rpx;
					color:$font-color-9;
				}
			}
			
		}
		.com-box{
			display: flex;
			flex-direction: column;
			.com-box-txt{
				font-size: 28rpx;
				font-weight: 400;
				line-height: 50rpx;
				color: $font-color-3;
				.com-box-txt-stick{
					float: left;
					width: 26rpx;
					height: 26rpx;
					line-height: 50rpx;
					margin: 12rpx 10rpx 0 0;
				}
			}
			.com-box-imgs{
				display: flex;
				flex-wrap: wrap;
				margin-bottom: 24rpx;
				.com-box-img{
					border-radius: 10rpx;
					margin-right: 12rpx;
					margin-top: 12rpx;
				}
				.com-box-img:nth-of-type(3n){
					margin-right: 0rpx;
				}
			}
			.com-box-msg{
				display: flex;
				flex-direction: column;
				.com-box-msg-box{
					display: flex;
					flex-direction: column;
					width: 100%;
					.com-box-msg-n{
						display: flex;
						flex-wrap: wrap;
						font-size: 28rpx;
						font-weight: bold;
						color: $font-color-3;
						.com-box-msg-m{
							font-size: 28rpx;
							padding: 0 14rpx;
							font-weight: 400;
							color: $font-color-9;
						}
					}
					
				}
				.all {
					height: 120rpx;
					overflow: hidden;
				}
				.more-btn {
					font-size: 26rpx;
					color: rgb(25, 143, 255);
					margin-top: 10rpx;
				}
			}
			.com-box-icons{
				display: flex;
				flex-direction: row-reverse;
				padding-bottom: 20rpx;
				margin-bottom: 20rpx;
				border-bottom: 1rpx solid #F2F4F5;
				.com-box-icon{
					display: flex;
					height: 72rpx;
					//background: #F5F5F5;
					border-radius: 6rpx;
					padding: 20rpx 0;
					.com-box-i{
						flex: 1;
						display: flex;
						align-items: center;
						padding:0rpx 20rpx;
						font-size: 28rpx;
						line-height: 40rpx;
						color:$font-color-9;
						border-right: 1rpx solid $font-color-9;
						.icon-tb{
							width: 32rpx;
							height:32rpx;
							margin-right: 10rpx;
						}
					}
					.com-box-i:last-of-type{
						border-right: none;
						margin-right:0;
					}
				}
			}
		}
	}
</style>
